<template>
    <div class="container" >
        <el-form :model="ruleForm"
                 :rules="rules"
                 ref="ruleFormRef"
                 label-width="100px"


        >
            <el-form-item label="头像" class="el-form-item" style="display: flex;justify-content: center;align-items: center;--el-form-label-font-size: 18px;">
                <div class="avatar-container">
                    <el-upload
                            name="imageFile"
                            action="/api/upload/image"
                            :show-file-list="false"
                            :on-success="changeImg"
                    >
                        <img v-if="ruleForm.image" :src="ruleForm.image" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
                    </el-upload>
                </div>
            </el-form-item>
            <el-form-item
                    style="width: 60%;--el-form-label-font-size: 18px;"
                    class="el-form-item"
                    label="昵称修改"
                    prop="username"
                    :rules="[
          { required: true, message: '请注意昵称长度在3~15个字符', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]"

            >
                <el-input v-model="ruleForm.username" style="width: 500px"></el-input>
            </el-form-item>



            <el-form-item label="性别" prop="region" class="el-form-item" style="--el-form-label-font-size: 18px;">
                <el-select v-model="ruleForm.sex" placeholder="请选择性别" style="width: 250px;">
                    <el-option label="男" value="MALE"></el-option>
                    <el-option label="女" value="FEMALE"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item
                    style="width: 350px;--el-form-label-font-size: 18px;"
                    class="el-form-item"
                    label="姓名"
                    prop="name"
                    :rules="[
          { required: false, message: '请注意长度在3~20个字符', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]"

            >
                <el-input v-model="ruleForm.name" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item
                    style="width: 60%;--el-form-label-font-size: 18px;"
                    class="el-form-item"
                    prop="email"
                    label="邮箱"
                    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
            >
                <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>

            <el-form-item
                    style="width: 60%;--el-form-label-font-size: 18px;"
                    class="el-form-item"
                    label="电话"
                    prop="phone"
                    :rules="[
          { required: false, message: '请输入电话', trigger: 'blur' },
          { min: 0, max: 150, message: '请注意长度不能超过150个字符', trigger: 'blur' }
        ]"

            >
                <el-input type="textarea" style="width: 100% ;height: 18px;" v-model="ruleForm.phone"></el-input>
            </el-form-item>

            <el-form-item>
                <br><br><br>
                <el-button type="primary" @click="submitForm"
                           :disabled= " ruleForm.name==='' || ruleForm.username==='' || ruleForm.phone==='' ||
                           ruleForm.email==='' || ruleForm.sex===null"><p style="font-size: 20px">提交修改</p></el-button>

            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
    import {ref, onMounted} from 'vue'
    import { updateMessage,findUser} from '@/api/user'
    import {reactive} from "@vue/reactivity";
    import { useStore } from "vuex";

    const store = useStore();

    const formLabelWidth = ref("200px");


    const ruleForm = reactive(
        {
            id:1,
            username: '',
            sex: 'MALE',
            name: '',
            email: '',
            phone: '',
            image: ''
        }
    )
    onMounted(() => {
        ruleForm.id = store.getters.getId
        console.log(store.getters.getId)
        //请求api根据id查询数据
        findUser({id:ruleForm.id}).then((res)=>{
            Object.assign(ruleForm,res.data)
        })
        console.log(store.getters)
    })
    console.log(ruleForm.value)

    const submitForm=()=>{
        console.log(ruleForm);
        updateMessage(ruleForm).then((res)=>{
            //store.commit('saveUser1',res.data)
            //ruleForm=res.data
            location.reload();
        })
    }


    const changeImg = (res) => {
        console.log(res);
        ruleForm.image_before = ruleForm.image;
        ruleForm.image = res.data;

    }

</script>

<style scoped>

    .container {
        width: 100%;
        display: flex;
        justify-content: center;
        /*background-color:#f5f5f5;*/
        border: 1px solid #ccc;
        border-radius: 10px;
        background-image: url('../../views/slider-pic/bizhi4.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .container .avatar {
        width: 178px;
        height: 178px;
        display: block;
        border-radius: 50%;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }
    .el-form-item {
        margin-bottom: 30px;
    }

</style>
